import React, { useState } from "react";
import {
  Modal,
  Form,
  Input,
  Select,
  Button,
  message,
  Typography,
  Space,
  Tag,
  Alert,
} from "antd";
import {
  SendOutlined,
  BookOutlined,
  CrownOutlined,
  RobotOutlined,
} from "@ant-design/icons";
import styled from "styled-components";

const { TextArea } = Input;
const { Title, Text } = Typography;
const { Option } = Select;

// 教师端专用样式
const TeacherModal = styled(Modal)`
  .ant-modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    .ant-modal-title {
      color: white;
    }
  }
  
  .ant-form-item-label > label {
    font-weight: bold;
    color: #1890ff;
  }
  
  .ant-input, .ant-select-selector {
    border-color: #1890ff;
  }
  
  .ant-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
  }
`;

const TeacherNotice = styled(Alert)`
  margin-bottom: 16px;
  border: 2px solid #1890ff;
  .ant-alert-icon {
    color: #1890ff;
  }
`;

interface NewDiscussionProps {
  visible: boolean;
  onCancel: () => void;
  onSubmit: (values: {
    title: string;
    content: string;
    tags: string[];
    requestAIResponse: boolean;
  }) => void;
  isTeacher?: boolean;
}

// 教师端专用标签选项
const TEACHER_TAG_OPTIONS = [
  "教学方法", "课程设计", "教学经验", "学生管理", "技术分享",
  "课程改革", "教学创新", "实验教学", "作业管理", "考试设计",
  "学生辅导", "能力培养", "课程思政", "教学反思", "团队协作",
  "资源建设", "信息化教学", "在线教学", "混合教学", "项目教学",
  "案例教学", "讨论教学", "实践教学", "理论教学", "技能培养",
  "创新教育", "创业教育", "就业指导", "职业规划", "学术研究",
  "科研方法", "论文写作", "学术交流", "国际视野", "跨文化",
  "质量保障", "评价体系", "持续改进", "专业建设", "学科发展"
];

const NewDiscussion: React.FC<NewDiscussionProps> = ({
  visible,
  onCancel,
  onSubmit,
  isTeacher = false,
}) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const handleSubmit = async () => {
    try {
      setLoading(true);
      const values = await form.validateFields();
      await onSubmit(values);
      form.resetFields();
    } catch (error) {
      message.error("请检查表单内容");
    } finally {
      setLoading(false);
    }
  };

  const handleCancel = () => {
    form.resetFields();
    onCancel();
  };

  return (
    <TeacherModal
      title={
        <Space>
          <CrownOutlined />
          <span>发布教师讨论</span>
        </Space>
      }
      open={visible}
      onCancel={handleCancel}
      onOk={handleSubmit}
      confirmLoading={loading}
      width={800}
      okText="发布"
      cancelText="取消"
      okButtonProps={{
        icon: <SendOutlined />,
        style: {
          background: "linear-gradient(135deg, #667eea 0%, #764ba2 100%)",
          border: "none"
        }
      }}
    >
      {/* 教师端使用须知 */}
      <TeacherNotice
        message="教师发布讨论须知"
        description={
          <div>
            <Text>
              <strong>作为教师，您发布的内容将获得特殊标识：</strong>
            </Text>
            <ul style={{ marginTop: 8, marginBottom: 0 }}>
              <li>👑 <strong>教师标识</strong>：您的讨论将显示金色教师标签</li>
              <li>🎨 <strong>特殊样式</strong>：使用渐变背景突出专业性</li>
              <li>🤖 <strong>AI支持</strong>：可选择AI智能分析和回复</li>
              <li>⭐ <strong>优先推荐</strong>：教师内容将获得更高的展示优先级</li>
            </ul>
          </div>
        }
        type="info"
        showIcon
      />

      <Form
        form={form}
        layout="vertical"
        initialValues={{
          tags: [],
          requestAIResponse: true,
        }}
      >
        <Form.Item
          name="title"
          label="讨论标题"
          rules={[
            { required: true, message: "请输入讨论标题" },
            { min: 5, message: "标题至少5个字符" },
            { max: 100, message: "标题不能超过100个字符" },
          ]}
        >
          <Input
            placeholder="请输入讨论标题，建议简洁明了地表达核心问题"
            maxLength={100}
            showCount
          />
        </Form.Item>

        <Form.Item
          name="content"
          label="讨论内容"
          rules={[
            { required: true, message: "请输入讨论内容" },
            { min: 20, message: "内容至少20个字符" },
            { max: 2000, message: "内容不能超过2000个字符" },
          ]}
        >
          <TextArea
            rows={6}
            placeholder="请详细描述您的问题、经验或观点。如果是教学经验分享，建议包含具体案例；如果是问题讨论，请说明背景和具体困难。"
            maxLength={2000}
            showCount
          />
        </Form.Item>

        <Form.Item
          name="tags"
          label="选择标签"
          rules={[{ required: true, message: "请至少选择一个标签" }]}
        >
          <Select
            mode="multiple"
            placeholder="请选择相关标签，最多选择5个"
            maxTagCount={5}
            maxTagTextLength={10}
            showSearch
            filterOption={(input, option) =>
              (option?.children as unknown as string)
                ?.toLowerCase()
                .includes(input.toLowerCase())
            }
          >
            {TEACHER_TAG_OPTIONS.map((tag) => (
              <Option key={tag} value={tag}>
                {tag}
              </Option>
            ))}
          </Select>
        </Form.Item>

        <Form.Item
          name="requestAIResponse"
          label="AI智能分析"
          valuePropName="checked"
        >
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <input
              type="checkbox"
              checked={form.getFieldValue("requestAIResponse")}
              onChange={(e) => form.setFieldsValue({ requestAIResponse: e.target.checked })}
            />
            <Space>
              <RobotOutlined style={{ color: "#722ed1" }} />
              <Text>
                请求AI智能分析（AI将基于您的内容提供专业的教学建议和问题分析）
              </Text>
            </Space>
          </div>
        </Form.Item>

        {/* 发布提示 */}
        <div style={{ 
          background: "linear-gradient(135deg, #f0f8ff 0%, #e6f7ff 100%)", 
          padding: 16, 
          borderRadius: 8, 
          border: "1px solid #91d5ff",
          marginTop: 16
        }}>
          <Space direction="vertical" size="small">
            <Text strong style={{ color: "#1890ff" }}>
              <BookOutlined /> 发布建议：
            </Text>
            <ul style={{ margin: 0, paddingLeft: 20 }}>
              <li>📝 标题要简洁明了，突出核心问题或主题</li>
              <li>📋 内容要详细具体，包含实际案例或具体场景</li>
              <li>🏷️ 选择合适的标签，便于其他教师查找和参与讨论</li>
              <li>🤖 开启AI分析可获得智能建议，提升讨论质量</li>
              <li>💡 分享真实的教学经验和遇到的问题，促进教师间交流</li>
            </ul>
          </Space>
        </div>
      </Form>
    </TeacherModal>
  );
};

export default NewDiscussion; 